<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        label="图片"
        width="280">
        <template slot-scope="scope">
          <img :src="scope.row.head" width="70" height="100">
        </template>
      </el-table-column>
      <el-table-column
        label="书名"
        prop="name"
        width="280">

      </el-table-column>
      <el-table-column
        label="数量"
        prop="number"
        width="280">
      </el-table-column>
      <el-table-column
        label="价格"
        prop="prices"
        width="280">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="goumai(scope.row.id);forderfind=scope.row">购买</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose">
      <el-table :data="forderfind" style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          label="图片"
          width="280">
          <template slot-scope="scope">
            <img :src="scope.row.head" width="70" height="100">
          </template>
        </el-table-column>
        <el-table-column
          label="书名"
          prop="name"
          width="280">
        </el-table-column>
        <el-table-column
          label="数量"
          prop="number"
          width="200">
        </el-table-column>
        <el-table-column
          label="价格"
          prop="prices"
          width="200" >
        </el-table-column>
      </el-table>
      <template>
        <el-select v-model="fsite.id" placeholder="请选择" style="width: 300px" @change="ppp(fsite.id)">
          <el-option v-for="item in fsite" :key="item.id" :label="item.aa" :value="item.id">

          </el-option>
        </el-select>
      </template>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="addorders()">立即购买</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>

import {data} from "autoprefixer";
import moment from "moment";

export default {
  name: "Gou",
  created() {
    this.$http.post('/frontservice/fcart/fcartprice').then(data=>{
      this.prices=data.data
    })
    let f_user=this.$store.state.user
    this.$http.post('/frontservice/site/find', {f_user}).then(data => {
      this.fsite = data.data
    })

    this.find(f_user)
  },
  data() {

    return {
      tableData: {},
      multipleSelection: [],
      prices:[],
      dialogVisible: false,
      fsite:{},
      siteid:0,
      forderp:{},
      forderfind:{}
    }
  }, methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }, goumai(id) {
      this.dialogVisible = true
      this.$http.post('/frontservice/fcart/fcc',{fid:id}).then(data => {
        this.forderfind = data.data
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(row) {

      this.$http.post('/frontservice/fcart/del', {id: row}).then(data => {
        this.find()
        this.$http.post('/frontservice/fcart/fcartprice').then(data => {
          this.prices = data.data
        })
      })
    },
    find(id) {
      this.$http.post('/frontservice/fcart/findcart',{id:id}).then(data => {
        this.tableData = data.data;
      })
    }, handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    }, tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }, ppp(id) {//选择地址下拉框改变

      if (id != null) {
        this.siteid = id
      }
    },addorders(){
      let book=this.forderfind.book
     alert(book)
      this.forderp.id=0
      this.forderp.book=this.forderfind.book
      this.forderp.num=this.forderfind.number
      this.forderp.price=this.forderfind.prices
      this.forderp.zongjia=this.forderfind.prices
      this.forderp.f_user=this.$store.state.user
      this.forderp.f_site=this.siteid
      this.forderp.state=0
      let  date= new Date()
      let dates=moment(date).format('YYYY-MM-DD')
      this.forderp.gtime=dates
      this.$http.post("/frontservice/forderss/add",this.forderp).then(data=> {
        this.dialogVisible = false
        this.handleDelete(this.forderfind.id)
      });
    }

  }
}

</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
